import React,{ Component,Fragment } from 'react'
import { NavLink } from 'react-router-dom'


const TopListItem = (props) => {
    return (
        <li className="item">
            <div className="icon">
                <img src="" alt=""/>
            </div>
            <ul className="songlist">
                <li className="song">
                    <span>1.</span>
                    <span>Hard Down - CROD</span>
                </li>
                <li className="song">
                    <span>2.</span>
                    <span>Hard Down - CROD</span>
                </li>
                <li className="song">
                    <span>3.</span>
                    <span>Hard Down - CROD</span>
                </li>
            </ul>
        </li>
    )
}
class Speed extends Component {

    renderTopListItem = () => {
        return this.props.rank.topListDetail && this.props.rank.topListDetail.map( (item,index) => {
            return <TopListItem item = { item } key = { index }></TopListItem>
        })
    }
    render () {
        return (
            <Fragment>
                 <NavLink to = {{ pathname : `/rank/${ this.props.item && this.props.item.id }` }}>
                <li className="item">
                    <div className="icon">
                        <img alt = { this.props.item && this.props.item.description } src = { this.props.item && this.props.item.coverImgUrl }/>
                    </div>
                    <ul className="songlist">
                        <li className="song">
                            <span>1.</span>
                            <span>{ this.props.item && this.props.item.tracks[0].name } - { this.props.item && this.props.item.tracks[0].ar[0].name }</span>
                        </li>
                        <li className="song">
                            <span>2.</span>
                            <span>{ this.props.item && this.props.item.tracks[1].name } - { this.props.item && this.props.item.tracks[1].ar[0].name }</span>
                        </li>
                        <li className="song">
                            <span>3.</span>
                            <span>{ this.props.item && this.props.item.tracks[2].name } - { this.props.item && this.props.item.tracks[2].ar[0].name }</span>
                        </li>
                    </ul>
                </li>
                </NavLink>
            </Fragment>
        )
    }
}

export default Speed